<template>
  <div class="main-com">
    <search ref="search"></search>
    <map-com ref="mapCom"></map-com>
    <toolbar ref="toolbar"></toolbar>
    <driver v-show="showDriver"></driver>
  </div>
</template>

<script>
  import MapCom from './MapCom.vue'
  import Search from './Search.vue'
  import Toolbar from './Toolbar.vue'
  import driver from './driver.vue'
  import {get} from '../js/api'

  export default {
    name: 'Main',
    data() {
      return {
        showDriver: false
      }
    },
    methods: {
      initConfig() {
        get('static/data/config.json?a=' + Math.random()).then((config) => {
          window.configJson = config.data;
          console.log(configJson);
          this.$refs.mapCom.initMap();
        })
      }
    },
    mounted() {
      this.initConfig()
    },
    components: {
      MapCom, Search, Toolbar, driver
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .main-com {
    position: relative;
  }


</style>
